<template>
  <div
    class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end bg-primary"
    :class="className"
    :style="{ backgroundImage: `url('${bgImage}')` }"
  >
    <!--begin::Header-->
    <div class="card-header pt-5">
      <!--begin::Title-->
      <div class="card-title d-flex flex-column">
        <!--begin::Amount-->
        <span class="fs-2hx fw-bold lh-1 ls-n2 me-2 text-white">{{ formattedDate }}</span>
        <!--end::Amount-->

        <!--begin::Subtitle-->
        <span class="fw-semibold fs-6 pt-1 text-white opacity-50">最新导入日期</span>
        <span class="fw-semibold fs-6 pt-1 text-white opacity-50">
          总提交数{{ totalCommits }} (始于2024-07-01)
        </span>
        <!--end::Subtitle-->
      </div>
      <!--end::Title-->
    </div>
    <!--end::Header-->

    <!--begin::Card body-->
    <div class="card-body d-flex align-items-end pt-0">
      <!--begin::Progress-->
      <div class="d-flex align-items-center flex-column w-100 mt-3">
        <div
          class="d-flex justify-content-between fw-bold fs-6 w-100 mb-2 mt-auto text-white opacity-50"
        >
          <span>本月提交数: {{ currentMonthCommits }}</span>
          <span>上月提交数: {{ previousMonthCommits }}</span>
        </div>

        <div class="h-8px w-100 mx-3 rounded bg-white bg-opacity-50">
          <div
            class="h-8px rounded bg-white"
            role="progressbar"
            :style="`width: ${(currentMonthCommits / previousMonthCommits) * 100}%`"
            aria-valuenow="100"
            aria-valuemin="0"
            aria-valuemax="100"
          ></div>
        </div>
      </div>
      <!--end::Progress-->
    </div>
    <!--end::Card body-->
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'ImportInfoWidget',
  props: {
    className: { type: String, default: '' },
    bgColor: { type: String, default: '#1E1E2D' },
    bgImage: { type: String, default: '' },
    latestImportDate: { type: [String, null], default: null },
    totalCommits: { type: Number, default: 0 },
    currentMonthCommits: { type: Number, default: 0 },
    previousMonthCommits: { type: Number, default: 0 }, // New prop
  },
  setup(props) {
    const formattedDate = computed(() => {
      if (!props.latestImportDate) return 'N/A';
      const date = new Date(props.latestImportDate);
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
      });
    });

    return { formattedDate };
  },
});
</script>
